import React, { useState } from 'react';
import { Outlet } from 'react-router-dom';
import { Sidebar, TopNav, LoginModal } from './index';
import StopTaskFloatingInput from './StopTaskFloatingInput';
import { useAuth } from '../contexts/AuthContext';
import './Layout.css';

const Layout: React.FC = () => {
  const [activeTab, setActiveTab] = useState('image');
  const { showLoginModal, setShowLoginModal, login } = useAuth();

  return (
    <div className="app">
      <Sidebar />
      <div className="main-layout">
        <TopNav activeTab={activeTab} setActiveTab={setActiveTab} />
        <div className="main-content-wrapper">
          <Outlet />
        </div>
      </div>
      
      {/* 登录弹窗 */}
      <LoginModal
        isVisible={showLoginModal}
        onClose={() => setShowLoginModal(false)}
        onLoginSuccess={login}
      />
      
      {/* 开发环境停止任务悬浮框 */}
      <StopTaskFloatingInput />
    </div>
  );
};

export default Layout;
